import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Alert,
    Image,
    ScrollView,
    FlatList,
    TouchableWithoutFeedback,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import px2dp from '../config/pxToDp';
import getData from '../config/fetch';


export default class SearchScene extends Component {
    constructor(props){
        super(props)
        this.state = {
            searchContent:null,
            searchContentLength:0,
            searchResultStatu:0,
            searchResultLength: 0,
            searchResult:[],
        }
    }
    getJson(){
        //http://192.168.31.14:82/index.php?m=User&c=Api&a=search&uid=200090&search=111
        getData.getData("?m=User&c=Api&a=search", "uid=" + uid + "&search=" + this.state.searchContent).then(res => {
            if (res.result != 0) {
                this.setState({
                    searchResult: res.data,
                    searchResultStatu: 1,
                    searchResultLength: res.data.length
                })
            }else{
                this.setState({
                    searchResult: null,
                    searchResultStatu: 1,
                    searchResultLength: 0
                })
            }
            
        })
    }
    search(){
        console.log(this.props.navigation.state.params.searchType)
        //searchUserFriend
        if (this.props.navigation.state.params.searchType == 'addFriends') {
            this.setState({searchContentLength:0})
            this.getJson()
        }
        
        
    }
    userList(){
        return(
            <View>

            </View>
        )
    }
    render() {
        return(
            <View>
                <View style={styles.title}>
                    <View style={styles.back}>
                        <TouchableWithoutFeedback style={styles.backButton} onPress={()=>{
                            this.props.navigation.goBack()
                        }}>
                            <Ionicons style={styles.Backicon} name='ios-arrow-back' size={35} color="#333"></Ionicons>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={styles.inputtes}>
                        <View style={styles.inputPartent}>
                            <Ionicons name="ios-search" size={26}/>
                            <TextInput style={styles.input} autoFocus={true} placeholder="搜索" underlineColorAndroid='transparent'
                                onChangeText={T=>{
                                    this.setState({
                                        searchContent: T,
                                        searchContentLength: T.length,
                                        searchResultStatu: T.length
                                    })
                                }}
                                onSubmitEditing={this.search.bind(this)}
                            />
                        </View>
                    </View>
                </View>
                {
                    this.state.searchContentLength != 0 ?(
                        <View>
                            <TouchableWithoutFeedback onPress={this.search.bind(this)}>
                                <View  style={styles.list}>
                                    <View style={styles.imgView}>
                                        <Image style={styles.img} source={require('../imgs/adduser.png')} />
                                    </View>
                                    <View style={styles.nameView}>
                                        <Text style = {[styles.size,]}>搜索：
                                        </Text>
                                        <Text style = {[styles.size,styles.fontColor]}>{this.state.searchContent}
                                        </Text>
                                    </View>
                                </View>
                                
                            </TouchableWithoutFeedback>
                            
                        </View>
                    ):(
                        this.state.searchResultStatu == 0 ? (
                            <View>
                                {/* <View style={styles.null}>
                                    <Text style={styles.nullText}>该用户不存在
                                    </Text>
                                </View> */}
                            </View>
                        ):(
                            this.state.searchResultLength == 0 ? (
                                <View>
                                    <View style={styles.null}>
                                        <Text style={styles.nullText}>该用户不存在
                                        </Text>
                                    </View>
                                </View>
                            ):(
                                <View>
                                    < FlatList
                                        renderItem={({item}) =>
                                            <View>
                                                <TouchableWithoutFeedback onPress={this.search.bind(this)}>
                                                    <View  style={styles.list}>
                                                        <View style={styles.imgView}>
                                                            <Image style={styles.img}  
                                                                source={{uri: item.headsmall}}
                                                            />
                                                        </View>
                                                        <View style={styles.nameView}>
                                                            <Text style = {[styles.size]}>
                                                                {item.nickname}
                                                            </Text>
                                                        </View>
                                                    </View>
                                                    
                                                </TouchableWithoutFeedback>
                                            </View>
                                        }
                                        data={this.state.searchResult}
                                    />
                                </View>
                            )
                            
                        )
                        
                    )
                }
                
            </View>
        )
    }
}
const styles = StyleSheet.create({
    title:{
        flexDirection: 'row',
        height:56,
        backgroundColor:"#fff",
        alignItems: 'center',
        paddingRight:10,
    },
    back:{
        flex:1.1,
        height:30,
        borderRightWidth: .6,        
        justifyContent: 'center',
        borderColor: "#e9e9e9",  
        alignItems: 'center',
    },
    backButton:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    Backicon:{
        height: 35,
        alignSelf: 'center',
    },
    inputtes:{
        justifyContent: 'center',
        flex: 8,
    },
    inputPartent:{
        // flex:1,
        height: 30,
        marginLeft:10,
        flexDirection: 'row',
        borderBottomWidth: .5,
        alignItems: 'center',
        borderColor:"rgb(16,177,246)",
    },
    input:{
        marginLeft: 5,
        padding:0,
        margin:0,
        height: 30,
        flex: 1,
    },
    list:{
        marginTop:1,
        padding:10,
        height:70,
        width:px2dp(640),
        flexDirection: 'row',
        backgroundColor:'#fff',
    },
    imgView:{
        width:px2dp(100),
    },
    img:{
        width: px2dp(80),
        height: 50,
        backgroundColor: '#fff',        
    },
    nameView:{
        flexDirection: 'row',
        justifyContent:'center',
        alignItems:"center",
        // width:px2dp(500)
    },
    size:{
        fontSize:16
    },
    fontColor:{
        color:'rgb(25,147,249)'
    },
    null:{
        marginTop:1,
        height:80,
        backgroundColor:"#fff",
        justifyContent: "center",

    },
    nullText:{
        textAlign:'center',
    },
});
